/* UI组件交互模块 - 通知消息功能 */

/**
 * 显示通知消息
 * @param {string} message - 通知内容
 * @param {string} type - 通知类型：success, error, warning, info
 * @param {number} duration - 显示持续时间（毫秒）
 */
export function showNotification(message, type = 'info', duration = 3000) {
  // 检查是否已存在通知容器
  let notificationContainer = document.querySelector('.notification-container');
  
  if (!notificationContainer) {
    // 创建通知容器
    notificationContainer = document.createElement('div');
    notificationContainer.className = 'notification-container';
    notificationContainer.style.position = 'fixed';
    notificationContainer.style.top = '20px';
    notificationContainer.style.right = '20px';
    notificationContainer.style.zIndex = '2000';
    notificationContainer.style.display = 'flex';
    notificationContainer.style.flexDirection = 'column';
    notificationContainer.style.gap = '10px';
    document.body.appendChild(notificationContainer);
  }
  
  // 创建通知元素
  const notification = document.createElement('div');
  notification.className = `notification notification-${type}`;
  notification.style.padding = '12px 16px';
  notification.style.borderRadius = '8px';
  notification.style.color = 'white';
  notification.style.fontSize = '14px';
  notification.style.fontWeight = '500';
  notification.style.display = 'flex';
  notification.style.alignItems = 'center';
  notification.style.gap = '8px';
  notification.style.opacity = '0';
  notification.style.transform = 'translateX(100%)';
  notification.style.transition = 'opacity 0.3s ease, transform 0.3s ease';
  notification.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
  notification.style.cursor = 'pointer';
  
  // 设置背景色和图标
  switch (type) {
    case 'success':
      notification.style.backgroundColor = 'var(--color-success)';
      notification.innerHTML = '<span>✓</span>' + message;
      break;
    case 'error':
      notification.style.backgroundColor = 'var(--color-danger)';
      notification.innerHTML = '<span>!</span>' + message;
      break;
    case 'warning':
      notification.style.backgroundColor = 'var(--color-warning)';
      notification.innerHTML = '<span>⚠</span>' + message;
      break;
    default:
      notification.style.backgroundColor = 'var(--color-primary)';
      notification.innerHTML = '<span>ℹ</span>' + message;
  }
  
  // 添加到容器
  notificationContainer.appendChild(notification);
  
  // 显示通知
  setTimeout(() => {
    notification.style.opacity = '1';
    notification.style.transform = 'translateX(0)';
  }, 10);
  
  // 点击通知关闭
  notification.addEventListener('click', function() {
    closeNotification(notification);
  });
  
  // 自动隐藏
  setTimeout(() => {
    closeNotification(notification);
  }, duration);
}

/**
 * 关闭通知
 * @param {HTMLElement} notification - 通知元素
 */
function closeNotification(notification) {
  notification.style.opacity = '0';
  notification.style.transform = 'translateX(100%)';
  
  setTimeout(() => {
    if (notification.parentNode) {
      notification.parentNode.removeChild(notification);
    }
  }, 300);
}

/**
 * 显示成功通知
 * @param {string} message - 通知内容
 * @param {number} duration - 显示持续时间
 */
export function showSuccessNotification(message, duration = 3000) {
  showNotification(message, 'success', duration);
}

/**
 * 显示错误通知
 * @param {string} message - 通知内容
 * @param {number} duration - 显示持续时间
 */
export function showErrorNotification(message, duration = 3000) {
  showNotification(message, 'error', duration);
}

/**
 * 显示警告通知
 * @param {string} message - 通知内容
 * @param {number} duration - 显示持续时间
 */
export function showWarningNotification(message, duration = 3000) {
  showNotification(message, 'warning', duration);
}

/**
 * 显示信息通知
 * @param {string} message - 通知内容
 * @param {number} duration - 显示持续时间
 */
export function showInfoNotification(message, duration = 3000) {
  showNotification(message, 'info', duration);
}